
/**
*
*/

<template>
  <el-form ref="form" :rules="rules" :model="formData" size="mini" label-width="110px" >
    <el-row type="flex" justify="flex-start" align="middle" class="flex">
      <template v-for="(col,index) in formTitle">
        <el-col v-if="col.type==='time'" :key="index" :md="8" :xs="20" :sm="12">
          <el-form-item :label="col.cn">
            <el-col :md="11" :xs="24" :sm="24">
              <el-date-picker
                v-model="formData[col.en]"
                type="daterange"
                value-format="timestamp"
                range-separator="-"
                start-placeholder="起始时间"
                end-placeholder="结束时间"
                unlink-panels
              />
            </el-col>
          </el-form-item>
        </el-col>
        <el-col
          v-else-if="col.type==='select'"
          :xl="4"
          :lg="5"
          :md="5"
          :xs="20"
          :sm="12"
          :key="index"
          class="check">
          <el-form-item :label="col.cn">
            <el-select v-model="formData[col.en]" placeholder="状态">
              <template v-for="item in col.list">

                <el-option :label="item.label" :value="item.value"/>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-else-if="col.type==='range'" :key="index" :lg="6" :md="6" :xs="20" :sm="12">
          <el-form-item :label="col.cn">
            <el-col :md="11" :xs="24" :sm="24">
              <el-input
                :placeholder="col.placeholder||'最小值'"
                v-model="formData[col.dataName.min]"
              />
            </el-col>
            <el-col :lg="1" :md="1" :sm="1" :xs="0" class="line">-</el-col>
            <el-col :md="11" :xs="24" :sm="24">
              <el-input
                :placeholder="col.placeholder||'最大值'"
                v-model="formData[col.dataName.max]"
              />
            </el-col>
          </el-form-item>
        </el-col>
        <el-col v-else :key="index" :lg="4" :md="4" :xs="20" :sm="12">
          <el-form-item :label="col.cn" :prop="col.en">
            <el-input v-model="formData[col.en]" :placeholder="col.placeholder"/>
          </el-form-item>
        </el-col>
      </template>

    </el-row>
    <el-col v-if="showBtn" :md="4" :sm="12" :xs="12" style="float:right">
      <el-button-group>
        <el-button type="primary" size="mini" @click="search">查询</el-button>
        <el-button type="primary" size="mini" @click="reset">重置</el-button>
      </el-button-group>
    </el-col>
  </el-form>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      default: () => { return {} }
    },
    formTitle: {
      type: Array,
      default: () => { return [] }
    },
    rules: {
      type: Object,
      default: () => { return {} }
    },
    showBtn: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    search() {
      this.$emit('search')
    },
    reset() {
      this.$emit('reset')
    }
  }
}
</script>

<style>
    .check .el-input__inner {
        padding-left: 8px;
    }
</style>
<style scoped>
    .flex {
        width: 90%;
        flex-wrap: wrap;
    }

    .line {
        text-align: center;
    }
</style>
